<template>
	<view class="lease_restitution">
		<!-- <u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs> -->

		<view class="container mt20">
			<lease-order-goods :image="orderDetail.goods_image">
				<template #name>{{ orderDetail.goods_name }}</template>
				<!-- <template #name>{{ orderDetail.goods_name }}</template> -->
				<template #specs>
					<text class="mr10">规格：租完可还/买断</text>
					<!-- <text>{{item.order_goods.goods_item_str}}{{ getPeriodsUnit(item.periods_attribute) }}</text> -->
					<text>{{orderDetail.goods_item_str}}</text>
				</template>
				<!-- <template #tenancy>
					<text class="mr10">租期：</text>
					<text>{{orderDetail.lease_start_date}}至{{orderDetail.lease_end_date}}</text>
				</template> -->
				<template #num>
					<text class="mr10">数量：</text>
					<text>{{orderDetail.goods_num}}</text>
				</template>
			</lease-order-goods>
		</view>
		<!-- 快递配送 -->
		<view class="container" v-if="send_type==1">
			<view class="row-between">
				<view class="express-xin">
					<!-- <image :src="express.icon" mode=""></image> -->
					<text>{{express.name}}</text>
					<text>{{express.invoice_no}}</text>
				</view>
				<view class="express-copy" @click="copyText">
					<image src="/bundle/static/images/copy2.png" mode="aspectFit"></image>复制单号
				</view>
			</view>
			<!-- 	<view class="mt30">
				<view class="express-detail">
					<view class="express-group">
						<image src="/bundle/static/images/Groupqs.png" mode=""></image>
					</view>
					<view class="express-right">
						<view class="title">
							<text>已签收</text><text>2025-12-23 12:45</text>
						</view>
						<view class="express-jies">
							【广州市】快件已从汕头澄海区广峰营业部发出，正在发往潮汕转运中心
						</view>
					</view>
				</view>
			</view> -->
			<view class="u-p-l-20 mt30">
				<u-time-line v-if="logistics_take.length!=0">
					<u-time-line-item nodeTop="2">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node" style="background: #2482ee;">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="checkmark-circle" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{logistics_take.title}}</view>
								<view class="u-order-desc mt10">{{logistics_take.tips}}
								</view>
								<view class="u-order-time"> {{logistics_take.time}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>

				<u-time-line v-if="logistics_traces.length!=0">
					<u-time-line-item nodeTop="2">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node" :class="[logistics_take.length==0?'bgmcolor':'bgmcolor1']">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="car" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{logistics_traces.title}}</view>
								<!-- <view class="u-order-time-traces mt20" @click="isTraces=!isTraces" v-if="!isTraces">
									<text>查看物流轨迹</text> <u-icon
										:name="isTraces?'arrow-up':'arrow-right'" color="#2979ff" size="20"></u-icon>
								</view> -->
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item v-for="(item,index) in logistics_traces.traces" :key="index" v-show="!isTraces">
						<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
						<template v-slot:content>
							<view>
								<view class="u-order-desc">{{item[0]}}</view>
								<view class="u-order-time">{{item[1]}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>

				<u-time-line v-if="logistics_delivery.length!=0">
					<u-time-line-item nodeTop="2">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node"
								:class="[logistics_traces.length==0 && logistics_take.length==0?'bgmcolor':'bgmcolor1']">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="calendar" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{logistics_delivery.title}}</view>
								<view class="u-order-desc mt10">{{logistics_delivery.tips}}
								</view>
								<view class="u-order-time"> {{logistics_delivery.time}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>

				<u-time-line v-if="logistics_order.length!=0">
					<u-time-line-item nodeTop="2">
						<!-- 此处自定义了左边内容，用一个图标替代 -->
						<template v-slot:node>
							<view class="u-node"
								:class="[logistics_delivery.length==0 && logistics_traces.length==0 && logistics_take.length==0?'bgmcolor':'bgmcolor1']">
								<!-- 此处为uView的icon组件 -->
								<u-icon name="bag" color="#fff" :size="24"></u-icon>
							</view>
						</template>
						<template v-slot:content>
							<view>
								<view class="u-order-title">{{logistics_order.title}}</view>
								<view class="u-order-desc mt10">{{logistics_order.tips}}
								</view>
								<view class="u-order-time"> {{logistics_order.time}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
		<!-- 无需快递 -->
		<view class="container noexperss" v-if="send_type==2">
			<view class="">
				发货信息
			</view>
			<view class="">
				<text>发货信息</text>
				<text>无需物流</text>
			</view>
			<view class="">
				<text>发货时间</text>
				<text>{{send_time}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getLeaseOrderExpress
	} from '@/api/lease.js'
	export default {
		data() {
			return {
				reletId: 0, //订单id
				orderDetail: {},
				express: {},

				list: [{
					name: '寄出物流'
				}, {
					name: '归还物流'
				}],
				current: 0,
				logistics_order: {}, //下单
				logistics_delivery: {}, //发货
				logistics_traces: {}, //运输中
				logistics_take: {}, //已签收
				isTraces: false,
				send_type: '', //1-快递配送 2-是无需快递
				send_time: ''
			}
		},

		methods: {
			// 初始化数据
			indata() {
				getLeaseOrderExpress({
					id: this.reletId
				}).then(res => {
					if (res.code != 1) return;
					this.orderDetail = res.data.order_goods;
					this.express = res.data.express;
					this.logistics_take = res.data.logistics_take;
					this.logistics_traces = res.data.logistics_traces;
					this.logistics_delivery = res.data.logistics_delivery;
					this.logistics_order = res.data.logistics_order;
					this.send_type = res.data.send_type;
					this.send_time = res.data.send_time;
				})
			},


			//确认续租
			confirmReturn() {

			},
			change(index) {
				this.current = index;
				console.log(index)
			},
			// 复制单号
			copyText() {
				const text = this.express.invoice_no;
				uni.setClipboardData({
					data: text,
					success: function() {
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: function() {
						uni.showToast({
							title: '复制失败',
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
		},

		onLoad(options) {
			const id = options.id
			this.reletId = id;
		},

		onShow() {
			this.indata()
		}
	}
</script>

<style lang="scss" scoped>
	.lease_restitution {
		padding: 0 24rpx 0 24rpx;
	}

	.container {
		padding: 24rpx 32rpx;
		margin-bottom: 20rpx;
		border-radius: 14rpx;
		background-color: #FFFFFF;
	}

	.uni-list-cell {
		background-color: #FFFFFF;
		padding: 32rpx 24rpx;
		border-radius: 24rpx;
		font-size: 32rpx;
		font-weight: 500;
	}


	.card-button {
		position: fixed;
		bottom: 0;
		width: 100%;
		background: #ffffff;
		padding: 30rpx;
		z-index: 1000;
		/* 确保不被其他元素覆盖 */
		left: 0;

	}

	.express-xin {
		color: #000000e6;
		font-size: 26rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 26rpx;

		>text {
			margin-right: 10rpx;
		}
	}

	.express-copy {
		color: #2482ee;
		font-size: 26rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 26rpx;

		>image {
			width: 30rpx;
			height: 30rpx;
			margin-right: 6rpx;
			vertical-align: bottom;
		}

	}

	.express-detail {
		display: flex;
		align-items: flex-start;

		.express-group {
			margin-right: 28rpx;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}

		.express-right {

			.title {
				>text:nth-child(1) {
					color: #000000e6;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 500;
					line-height: 28rpx;
					margin-right: 16rpx;
				}

				>text:nth-child(2) {
					color: #00000066;
					font-size: 28rpx;
					font-style: normal;
					font-weight: 500;
					line-height: 28rpx;
				}
			}
		}

		.express-jies {
			margin-top: 16rpx;
			color: #00000099;
			font-size: 28rpx;
			font-style: normal;
			font-weight: 500;
			line-height: normal;
		}
	}

	.u-node {
		width: 44rpx;
		height: 44rpx;
		border-radius: 100rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #d0d0d0;
	}

	.u-order-title {
		color: #333333;
		// font-weight: bold;
		font-size: 28rpx;
		color: #000000e6;
	}

	.u-order-desc {
		color: #00000099;
		font-size: 28rpx;
		margin-bottom: 6rpx;
	}

	.u-order-time {
		color: rgb(200, 200, 200);
		font-size: 26rpx;
	}

	.u-order-time-traces {
		color: #2482ee;
		font-size: 24rpx;
		font-style: normal;
		font-weight: 500;
		line-height: normal;

		>text {
			margin-right: 18rpx;
		}
	}

	.returnGh {
		padding: 30rpx;
		color: #000000e6;
		font-size: 32rpx;
		font-style: normal;
		font-weight: 500;
		line-height: 32rpx;

		>text:nth-child(1) {
			font-weight: 400;
		}

		>text:nth-child(2) {
			color: #2482ee;
		}
	}

	.bgmcolor {
		background-color: #2482ee;
	}

	.bgmcolor1 {
		background-color: #00000066;
	}

	.noexperss {

		>view:nth-child(1) {
			font-size: 28rpx;
			font-weight: 700;
			color: #000000e6;
		}

		>view:nth-child(2) {
			font-size: 26rpx;
			margin: 40rpx 0;

		}

		>view:nth-child(3) {
			font-size: 26rpx;
		}

		text {
			margin-right: 100rpx;
		}
	}
</style>